<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#FFFFFF" leftWidth="180rpx" rightWidth="180rpx" color="#333333" :fixed="true" :padding="false" @clickLeft="goBack" @clickRight="$goByName('renownlist')">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">声望值</text>
			<template slot="right">
				<text class="text-primary">明细</text>
			</template>
		</uni-nav-bar>
		<view class="head">
			<scroll-view :scroll-x="true" class="scroll-X" v-if="userRenown.type">
				<view class="rulelist text-info color-white flex-c">
					<view class="rulelist-top flex-r">
						<template v-for="(item, index) in renownRule">
							<view class="rule-item flex-c ac negative" :key="index" v-if="index == 0">
								<text class="item-desc">{{item.desc}}</text>
							</view>
							<view class="rule-item flex-c ac positive" :key="index" v-else>
								<text class="item-num" v-if="index == renownRule.length - 1"></text>
								<text class="item-num" v-else>{{item.min == item.max ? 0 : item.min + '~' +item.max}}</text>
								<view class="item-body" :class="{'active': userRenown.type == item.type}" :style="'height:'+ ((index - 1) * 50 + 10) +'rpx;'"></view>
							</view>
						</template>
					</view>
					<view class="rulelist-bottom flex-r">
						<template v-for="(item, index) in renownRule">
							<view class="rule-item flex-c ac negative" :key="index" v-if="index == 0">
								<view class="item-body" :class="{'active': userRenown.type == item.type}"></view>
								<text class="item-num">< 0</text>
							</view>
							<view class="rule-item flex-c ac positive" :key="index" v-else>
								<text class="item-desc">{{item.desc}}</text>
							</view>
						</template>
					</view>
				</view>
			</scroll-view>
			<image class="line-icon" src="@/public/images/member/x.png" mode="aspectFit"></image>
			<view class="renown flex-c ac color-white" v-if="userRenown.desc">
				<image class="inheritwh" src="@/public/images/member/renown.png" mode="aspectFit"></image>
				<text class="score">{{userRenown.score || 0}}</text>
				<text class="name">声望值</text>
				<text class="desc">{{userRenown.desc}}</text>
			</view>
		</view>
		<view class="body bottom-ios">
			<view class="body-item" v-if="renownCount[1]">
				<text class="text-primary text-bold">声望值的获取</text>
				<template v-for="(item, index) in renownData">
					<view class="renown-body" :key="index">
						<text class="renown-title text-secondary color-grey">{{item.title}}</text>
						<scroll-view :scroll-x="true" class="renown-list">
							<view class="listbox flex-r">
								<template v-for="(renown, index) in item.list">
									<view class="list-item flex-c" :key="index" v-if="renownCount[renown.type]">
										<text class="item-name text-secondary">{{renown.name}}</text>
										<text class="item-value text-info color-grey">声望值{{renownCount[renown.type].score < 0 ? renownCount[renown.type].score : '+'+renownCount[renown.type].score}}</text>
										<view class="progress-box flex-r ac jsb" v-if="renownCount[renown.type].limit != 2147483647">
											<view class="progress">
												<view class="progress-active" :style="'width:'+ renownCount[renown.type].percent +'%;'"></view>
											</view>
											<text class="item-limit text-info color-grey">{{renownCount[renown.type].countNum || 0}}/{{renownCount[renown.type].limit}}</text>
										</view>
									</view>
								</template>
							</view>
						</scroll-view>
					</view>
				</template>
			</view>
			<view class="body-item" v-if="couponRule[0]">
				<text class="text-primary text-bold">声望值的用途</text>
				<view class="exchange flex-r ac" v-for="(coupon, index) in couponRule" :key="index">
					<image class="exchange-icon" src="@/public/images/member/dh.png" mode="aspectFit"></image>
					<view class="exchange-desc flex-c">
						<text class="text-secondary">兑换优惠券</text>
						<text class="text-small color-grey mt20">{{ coupon.ruleDes }}</text>
					</view>
					<button class="exchange-btn flex-r ac" :class="{'active': userRenown >= coupon.ruleValue}" @tap="exchangeCoupon(coupon)">立即兑换</button>
				</view>
			</view>
			<view class="body-item">
				<text class="text-primary text-bold">彩虹声望损耗规则</text>
				<view class="rules flex-r ac">
					<text class="text-small">
						用户可通过高质量的互动和参与氛围维护提升声望值;
						产出违规的方案、帖子、回复、评论及其他违规行为被处理将会扣除声望值，回留言/回复被删除扣除20声望，方案/投票/讨论被删除扣除30声望
						账号被球吧禁言：-20声望，被球吧删除：-100声望
						如对扣除处理抱有疑问，可使用意见反馈进行申诉。
						请各位用户珍视球吧的交流氛围，共建温暖、热闹的彩虹球吧~
					</text>
				</view>
			</view>
			<view class="body-item" v-if="renownRule[0]">
				<text class="text-primary text-bold">彩虹声望等级权益划分</text>
				<view class="grade flex-r">
					<view class="grade-left flex-c">
						<view class="item-name" v-for="(action, index) in actionList" :key="index">
							<text class="text-small flex-r ac jc">{{action.name}}</text>
						</view>
					</view>
					<scroll-view :scroll-x="true" class="grade-right">
						<view class="grade-list flex-r">
							<view class="grade-list-item flex-c ac" v-for="(item, index) in renownRule" :key="index" :class="{'active': item.type == userRenown.type}">
								<view class="item-info flex-r ac jc" v-for="(action, indexs) in actionList" :key="indexs">
									<text class="text-small flex-r ac jc" v-if="indexs == 0">{{item.desc}}</text>
									<template v-else>
										<template v-if="item.type >= action.type">
											<image v-if="item.type == userRenown.type" class="limit-icon" src="@/public/images/member/yes_r.png" mode="aspectFit"></image>
											<image v-else class="limit-icon" src="@/public/images/member/yes_b.png" mode="aspectFit"></image>
										</template>
										<template v-else>
											<image v-if="item.type == userRenown.type" class="limit-icon" src="@/public/images/member/no_r.png" mode="aspectFit"></image>
											<image v-else class="limit-icon" src="@/public/images/member/no_b.png" mode="aspectFit"></image>
										</template>
									</template>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userRenown: {},
				renownRule: [],
				levelIndex: 0,
				renownCount: [],
				renownData: [
					{
						title: '内容创作',
						list: [
							{name: '方案/话题帖/投票帖', value: '+3', type: 6, limit: 3},
							{name: '被留言/回复', value: '+2', type: 4, limit: 3},
							{name: '被点赞', value: '+2', type: 5, limit: 3}
						]
					},
					{
						title: '友善互动',
						list: [
							{name: '回复/评论', value: '+1', type: 3, limit: 10},
							{name: '点赞', value: '+1', type: 2, limit: 10},
							{name: '浏览', value: '+1', type: 1, limit: 10},
						]
					},
					{
						title: '球吧建设',
						list: [
							{name: '投诉/建议成功', value: '+5', type: 7, limit: 20},
							{name: '被球吧禁言', value: '-20', type: 9},
							{name: '被球吧删除', value: '-100', type: 10},
							{name: '被删方案/话题帖/投票帖', value: '-30', type: 11},
							{name: '被删留言/评论', value: '-20', type: 12},
							{name: '邀请好友', value: '+50', type: 8, limit: -1},
						]
					}
				],
				actionList: [
					{name: '权益', type: -1},
					{name: '浏览', type: 1},
					{name: '点赞', type: 1},
					{name: '评论', type: 2},
					{name: '回复', type: 2},
					{name: '发投票', type: 3},
					{name: '发话题', type: 3},
					{name: '发公推', type: 4},
					{name: '发方案', type: 5},
				],
				couponRule: []
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			console.log(this.user);
			this.updateUserRenown()
			this.getRenownRule()
			this.getRenownCount()
			this.getCouponRule()
		},
		methods: {
			//声望等级规则
			getRenownRule() {
				let renownRule = sessionStorage.getItem('renownrule')
				if(renownRule){
					this.renownRule = JSON.parse(renownRule)
					return
				}
				this.$http.get({
					url: '/api/appUser/level/rule',
				}).then((data) => {
					console.log('rule', data);
					if(data.success && data.result){
						this.renownRule = data.result
						sessionStorage.setItem('renownrule',JSON.stringify(data.result))
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//当日声望统计
			getRenownCount() {
				this.$http.get({
					url: '/api/forum/score/count/today',
				}).then((data) => {
					if(data.success && data.result){
						console.log('count', data.result);
						this.renownCount = []
						data.result.map(item => {
							item.percent = item.countNum && item.limit != 2147483647 ? item.countNum / item.limit * 100 : 0
							this.$set(this.renownCount, item.scoreType, item)
						})
						console.log(this.renownCount);
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询优惠券兑换规则
			getCouponRule() {
				this.$http.get({
					url: '/api/appUser/queryAppRuleRows',
					data: {
						type: 'scoreDCoupon'
					}
				}).then((data) => {
					console.log('coupon', data);
					if(data.success && data.result){
						this.couponRule = data.result
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//更新声望值
			updateUserRenown() {
				this.$store.dispatch('updateUserRenown').then((data) => {
					console.log('updateUserRenown', data);
					this.userRenown = data
					//this.getRenownLevel()
				}).catch((error)=>{
					console.log(error);
				});
			},
			//当前等级
			getRenownLevel() {
				let length = this.renownRule.length
				for(let i = length - 1; i >= 0; i--){
					if(this.userRenown.score >= this.renownRule[i].min){
						this.levelIndex = i
						break
					}
				}
			},
			//查询单个操作的声望值统计
			getActionCount(type) {
				let count = this.renownCount.find(item => item.scoreType == type)
				if(count){
					return count.countNum || 0
				}else{
					return 0
				}
			},
			//领取优惠券
			exchangeCoupon(coupon) {
				console.log(coupon);
				if(this.isExchange){
					return
				}
				this.isExchange = true
				this.$http.post({
					url: '/api/appUser/userExchangeCouponByScore',
					data: {
						couponId: coupon.awardCouponId,
						score: coupon.ruleValue,
						userId: this.user.userId
					}
				}).then(data => {
					console.log(data);
					if(data.success){
						this.isExchange = false
						uni.showToast({
							title: data.message || '兑换成功',
							icon: 'success'
						})
						//更新声望值
						this.updateUserRenown()
					}else{
						uni.showToast({
							title: data.message || '兑换失败，请稍后重试',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err)
					this.isExchange = false
					uni.showToast({
						title: data.message || '请求失败，请稍后重试',
						icon: 'none'
					})
				})
			},
			//返回
			goBack(){
				let pages = getCurrentPages().length
				console.log(pages);
				if(pages > 1){
					this.$Router.back(1)
				}else{
					this.$Router.pushTab({name: 'userhome'})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.ch-nav{
			.text-primary{
				margin-right: 20rpx;
			}
		}
	}
	.head{
		max-width: $max-width;
		margin: $pc-margin;
		width: 750rpx;
		height: 480rpx;
		background: linear-gradient(180deg, #0055FF 0%, #4D88FF 100%);
		position: relative;
		.scroll-X{
			white-space: nowrap;
			.rulelist{
				width: fit-content;
				height: 480rpx;
				box-sizing: border-box;
				position: relative;
				.rulelist-top{
					padding-left: 20rpx;
					align-items: flex-end;
					position: absolute;
					bottom: 105rpx;
				}
				.rulelist-bottom{
					height: 105rpx;
					padding-left: 20rpx;
					align-items: flex-start;
					position: absolute;
					bottom: 0;
				}
				.rule-item{
					width: 140rpx;
					height: fit-content;
					.item-body{
						width: 80rpx;
						margin: 20rpx 0 0;
						&.active{
							background: #FFFFFF !important;
						}
					}
					.item-num{
						font-family: Arial;
					}
					&.negative{
						.item-desc{
							margin-bottom: 20rpx;
						}
						.item-body{
							height: 40rpx;
							margin: 0 0 20rpx;
							background: linear-gradient(0deg, #80AAFF 0%, rgba(128,170,255,0.4) 100%);
							border-radius: 0rpx 0rpx 4rpx 4rpx;
						}
					}
					&.positive{
						.item-desc{
							margin-top: 20rpx;
						}
						.item-body{
							background: linear-gradient(0deg, rgba(128,170,255,0.4) 0%, #80AAFF 100%);
							border-radius: 4rpx 4rpx 0rpx 0rpx;
						}
					}
				}
			}
		}
		.line-icon{
			width: 745rpx;
			height: 1px;
			position: absolute;
			left: 4rpx;
			bottom: 105rpx;
			transform: scaleY(0.5);
			transform-origin: bottom;
		}
		.renown{
			position: absolute;
			width: 306rpx;
			height: 205rpx;
			top: 47rpx;
			left: 20rpx;
			text{
				position: absolute;
			}
			.score{
				top: 35rpx;
				font-size: 48rpx;
				font-family: Roboto;
			}
			.name{
				top: 88rpx;
				font-size: 24rpx;
			}
			.desc{
				bottom: 22rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #0055FF;
			}
		}
	}
	.body{
		.body-item{
			margin-top: 40rpx;
			.text-primary{
				margin-left: 20rpx;
			}
			.renown-body{
				margin-top: 30rpx;
				.renown-title{
					margin-left: 20rpx;
				}
				.renown-list{
					margin-top: 20rpx;
					white-space: nowrap;
					.listbox{
						width: fit-content;
						.list-item{
							margin-left: 20rpx;
							min-width: 280rpx;
							padding: 30rpx 20rpx 34rpx;
							box-sizing: border-box;
							background: #FFFFFF;
							border-radius: 10rpx;
							.item-value{
								margin-top: 15rpx;
							}
							.progress-box{
								margin-top: 27rpx;
								.progress{
									width: 160rpx;
									height: 12rpx;
									background: #E6E6E6;
									border-radius: 6rpx;
									.progress-active{
										height: 12rpx;
										background: #0055FF;
										border-radius: 6rpx;
									}
								}
							}
						}
						.list-item:last-child{
							margin-right: 20rpx;
						}
					}
				}
			}
			.exchange{
				margin: 30rpx 20rpx 0;
				width: 710rpx;
				padding: 30rpx 20rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				box-sizing: border-box;
				.exchange-icon{
					width: 56rpx;
					height: 64rpx;
				}
				.exchange-desc{
					flex: 2;
					margin-left: 20rpx;
					.text-secondary{
						font-weight: 500;
					}
					.text-small{
						max-width: 400rpx;
						line-height: 1.25;
					}
				}
				.exchange-btn{
					height: 60rpx;
					background: #CCCCCC;
					border-radius: 30rpx;
					padding: 0 35rpx;
					margin: 0;
					font-size: 22rpx;
					color: #FFFFFF;
					&.active{
						background: #0055FF;
					}
				}
			}
			.rules{
				color: #666666;
				line-height: 40rpx;
				padding: 20rpx 20rpx 0;
			}
			.grade{
				margin: 30rpx 0 0 20rpx;
				padding-bottom: 30rpx;
				font-weight: 500;
				position: relative;
				.grade-left{
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					.item-name{
						text{
							width: 160rpx;
							height: 80rpx;
							background: #D9E5FF;
							border-right: 1rpx solid #FFFFFF;
							border-bottom: 1rpx solid #FFFFFF;
							box-sizing: border-box;
						}
					}
					.item-name:last-child{
						text{
							border-bottom: none;
						}
					}
				}
				.grade-right{
					white-space: nowrap;
					z-index: 1;
					.grade-list{
						width: fit-content;
						padding-left: 160rpx;
						padding-right: 20rpx;
						background-color: #FFFFFF;
						background-clip: content-box;
						.grade-list-item{
							.item-info{
								width: 160rpx;
								height: 80rpx;
								border-right: 1rpx solid #FFFFFF;
								border-bottom: 1rpx solid #FFFFFF;
								background-color: #D9E5FF;
								box-sizing: border-box;
								text{
									font-weight: 500;
								}
								.limit-icon{
									width: 34rpx;
									height: 32rpx;
								}
							}
							.item-info:last-child{
								border-bottom: none;
							}
							&.active{
								.item-info{
									background-color: #FFFFFF;
									border-left: 2rpx solid #0055FF;
									border-right: 2rpx solid #0055FF;
									border-bottom: none;
									box-sizing: border-box;
								}
								.item-info:first-child{
									border-top: 2rpx solid #0055FF;
									font-weight: bold;
									color: #0055FF;
								}
								.item-info:last-child{
									border-bottom: 2rpx solid #0055FF;
								}
							}
						}
						.grade-list-item:last-child{
							.item-info{
								border-right: none;
							}
							&.active{
								
							}
						}
					}
				}
			}
		}
	}
</style>
